<template>  
  <div>  
    <div id="main2" style=" width: 680px;height: 500px"></div>
  </div>  
</template>  
<script lang="ts" setup>  
import * as echarts from 'echarts';    
import { drawPieChart } from '/@/api/tb/tbChart';  
import {onMounted, onUnmounted, ref} from "vue";

let data_name=ref<any>([])
let data_value = ref<any>([])
let data = ref<any>([])
onMounted(() => {  
  type EChartsOption = echarts.EChartsOption;  
  var chartDom = document.getElementById('main2')!;  
  var myChart = echarts.init(chartDom);  
  var option: EChartsOption;  
  const getData1 = async() => {    
    const res = await drawPieChart();    
     data_name.value = Object.keys(res.data);
     data_value.value = Object.values(res.data);
     data.value = data_value.value.map((value, index) => {
       return { value, name: data_name.value[index] };
     });
  option = {
  title: {
    text: '饼状图',
    subtext: '延期订单与未延期订单数量',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '提示',
      type: 'pie',
      radius: '50%',
      data: data.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
  option && myChart.setOption(option);  
};  
  getData1()  
    window.onresize = function () {  
      myChart.resize();  
    };  
   }
);   
onUnmounted(() => {
      echarts.dispose;
    });
</script>
